<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>账户充值 - 虚拟银行系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/recharge.css">
</head>
<body>
  <div class="app-wrapper">
    <!-- 顶部导航栏 -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <div id="sidebar"></div>
      
      <!-- 主内容区 -->
      <div class="content">
        <div class="dashboard-header">
          <div class="dashboard-welcome">
            <h1 class="dashboard-welcome-title">账户充值</h1>
            <p class="dashboard-welcome-subtitle">为您的账户添加资金</p>
          </div>
        </div>
        
        <div class="recharge-container">
          <div class="recharge-account-info card mb-4">
            <div class="card-header">
              <h3 class="card-title">账户信息</h3>
            </div>
            <div class="card-body">
              <div class="account-balance-box">
                <div class="account-balance-label">当前余额</div>
                <div class="account-balance-value" id="account-balance">¥0.00</div>
              </div>
            </div>
          </div>
          
          <div class="recharge-form-container card">
            <div class="card-header">
              <h3 class="card-title">充值金额</h3>
            </div>
            <div class="card-body">
              <form id="recharge-form">
                <div class="form-group">
                  <label class="form-label" for="recharge-amount">充值金额</label>
                  <div class="input-with-icon">
                    <i class="fas fa-yen-sign"></i>
                    <input type="number" id="recharge-amount" name="amount" class="form-control" placeholder="请输入充值金额" min="1" step="0.01" required>
                  </div>
                  <div class="form-error" id="amount-error"></div>
                </div>
                
                <div class="amount-quick-select">
                  <div class="amount-quick-select-label">快捷金额：</div>
                  <div class="amount-quick-select-options">
                    <div class="amount-option" data-amount="100">¥100</div>
                    <div class="amount-option" data-amount="200">¥200</div>
                    <div class="amount-option" data-amount="500">¥500</div>
                    <div class="amount-option" data-amount="1000">¥1000</div>
                    <div class="amount-option" data-amount="2000">¥2000</div>
                    <div class="amount-option" data-amount="5000">¥5000</div>
                  </div>
                </div>
                
                <div class="form-group">
                  <label class="form-label">充值方式</label>
                  <div class="payment-methods">
                    <div class="payment-method active" data-method="ALIPAY">
                      <div class="payment-method-icon">
                        <i class="fab fa-alipay"></i>
                      </div>
                      <div class="payment-method-name">支付宝</div>
                    </div>
                    <div class="payment-method" data-method="WECHAT">
                      <div class="payment-method-icon">
                        <i class="fab fa-weixin"></i>
                      </div>
                      <div class="payment-method-name">微信支付</div>
                    </div>
                    <div class="payment-method" data-method="BANK_CARD">
                      <div class="payment-method-icon">
                        <i class="fas fa-credit-card"></i>
                      </div>
                      <div class="payment-method-name">银行卡</div>
                    </div>
                  </div>
                  <input type="hidden" id="payment-method" name="channel" value="ALIPAY">
                </div>
                
                <div id="bank-card-options" style="display: none;">
                  <div class="form-group">
                    <label class="form-label">选择银行卡</label>
                    <div class="card-select" id="bank-card-select">
                      <div class="card-select-placeholder">加载中...</div>
                    </div>
                  </div>
                </div>
                
                <div class="form-group">
                  <button type="submit" class="btn btn-primary btn-block" id="recharge-submit-btn">立即充值</button>
                </div>
              </form>
            </div>
          </div>
          
          <div class="recharge-notice card mt-4">
            <div class="card-header">
              <h3 class="card-title">充值须知</h3>
            </div>
            <div class="card-body">
              <ul class="notice-list">
                <li>单笔充值金额限制：最低1元，最高50,000元</li>
                <li>充值成功后资金将实时到账</li>
                <li>如充值过程中遇到问题，请联系客服</li>
                <li>请确保充值环境安全，谨防诈骗</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 支付确认模态框 -->
  <div class="modal" id="payment-modal" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">确认支付</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="payment-info">
            <div class="payment-amount">¥<span id="confirm-amount">0.00</span></div>
            <div class="payment-method-info">
              <span>通过</span>
              <span id="confirm-method">支付宝</span>
              <span>支付</span>
            </div>
          </div>
          
          <div class="payment-qrcode">
            <div class="qrcode-wrapper">
              <div class="qrcode-placeholder">
                <i class="fas fa-qrcode"></i>
              </div>
              <div class="qrcode-text">请扫码完成支付</div>
            </div>
          </div>
          
          <div class="payment-tips">
            <p>请在新打开的页面完成支付，支付完成前请不要关闭此窗口</p>
            <p>支付完成后，请点击下面的"支付完成"按钮</p>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="payment-done-btn">支付完成</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 支付结果模态框 -->
  <div class="modal" id="result-modal" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">充值结果</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body text-center" id="result-content">
          <div class="result-icon success">
            <i class="fas fa-check-circle"></i>
          </div>
          <h3 class="result-title" id="result-title">充值成功</h3>
          <p class="result-message" id="result-message">您的账户已成功充值 ¥1000.00</p>
          
          <div class="result-details">
            <div class="result-detail-item">
              <div class="result-detail-label">交易单号</div>
              <div class="result-detail-value" id="result-trade-no">--</div>
            </div>
            <div class="result-detail-item">
              <div class="result-detail-label">充值金额</div>
              <div class="result-detail-value" id="result-amount">¥0.00</div>
            </div>
            <div class="result-detail-item">
              <div class="result-detail-label">充值方式</div>
              <div class="result-detail-value" id="result-channel">--</div>
            </div>
            <div class="result-detail-item">
              <div class="result-detail-label">充值时间</div>
              <div class="result-detail-value" id="result-time">--</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="view-record-btn">查看交易记录</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/PageLayout.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/recharge.js"></script>
</body>
</html>
